<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>Portfolio</title>
    <link href="/css/base/style.css" rel="stylesheet" type="text/css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- jQuery -->
    <script type="text/javascript" src="/js/base/jquery.min.js"></script>
    <script type="text/javascript" src="/js/base/jquery.mixitup.min.js"></script>
    <script src="/js/base/jquery.magnific-popup.js" type="text/javascript"></script>
    <link href="/css/base/magnific-popup.css" rel="stylesheet" type="text/css">
    <script>
        $(document).ready(function () {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });
        });
    </script>
</head>
<body>
<div th:insert="~{common :: #header}"></div>
<div class="banner">
    <div class="wrap">
        <h2>Portfolio</h2>
        <div class="clear"></div>
    </div>
</div>
<div class="main">
    <div class="portfolio-top">
        <div class="wrap">
            <h3>We Creative Quality Designs.</h3>
            <h5>We Specialize in Web Design / Development and Graphic Design</h5>
        </div>
    </div>
    <div class="container">
        <ul id="filters" class="clearfix">
            <li><span><a class="filter" href="">全部</a></span></li>
            <li th:each="tag : ${tagList}"><span><a class="filter" href="" th:text="${tag.getTagTitle()}"></a></span></li>
        </ul>
        <div class="clear"></div>
        <div id="portfoliolist">
            <div class="wrapper">
                <div class="portfolio logo1 mix_all" data-cat="logo" style=" ">
                    <div class="portfolio-wrapper">
                        <a href="teamDetail.html">
                            <img src="/images/pic12.jpg" alt="Image 2">
                        </a>
                        <div class="links">
                            <h4><a href="">Lorem ipsum dolor sit amet</a></h4>
                            <p class="img"><img src="/images/likes.png" title="likes" alt=""/>12</p>
                            <div class="clear"></div>
                            <ul>
                                <li><a href="#"><span>December 14, 2013</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>



                <div th:each="team :${teamList.list}" class="portfolio app mix_all" data-cat="app" style="  display: inline-block; opacity: 1;">
                    <div class="portfolio-wrapper">
                        <a th:href="'/page/ourTeamDetail.html?teamNum=' + ${team.teamNumber}">
                            <img style="height: 370px; width: 466px;" th:src="${team.teamImgUrl}" alt="Image 2">
                        </a>
                        <div class="links">
                            <h4><a th:href="'/page/ourTeamDetail.html?teamNum=' + ${team.teamNumber}" th:text="${team.teamTitle}"></a></h4>
                            <p class="img"><img src="/images/likes.png" title="likes" alt="" th:text="${team.teamLikeNum}"/></p>
                            <div class="clear"></div>
                            <ul>
                                <li><a><span th:text="${#dates.format(team.createTime,'yyyy年MM月dd日 HH:mm')}"></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<div th:insert="~{common :: #footer}"></div>
</body>
</html>    		
             		
      	   		                                                                                            